<template>
	<view>
		<!-- <view style="style=width: 100%; height: 450rpx;" v-if="!isLoad">
			<u-loading mode="flower"></u-loading>
		</view> -->
		<u-toast ref="uToast" />
		<u-image src="" v-if="!isLoad" width="100%" height="450rpx"></u-image>
		<u-image :src="url + 'courseImages/' + courseDetails.courseImage" v-if="isLoad" width="100%" height="450rpx"></u-image>

		<view style="position: absolute; top: 20rpx; left: 20rpx;">
			<navigator hover-class="none" open-type="navigateBack">
				<u-icon name="arrow-left" color="#ffffff" size="50"></u-icon>
			</navigator>
			<u-icon name="more-dot-fill" style="margin-top: -50rpx; margin-left: 630rpx;position: absolute;" size="50" @tap="goEvaluate"></u-icon>
		</view>
		<!-- myTab用于定位组件 -->
		<view id="myTab">
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"
			 bar-height="6"></u-tabs-swiper>
		</view>
		<swiper :style="'height:' +  height + 'rpx;'" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index" :style="index == 0 ? 'background-color: #ffffff;' : 'background-color: #F7F7F7;'">
				<scroll-view scroll-y :style="'height:' + height + 'rpx;width: 100%;'" @scrolltolower="onreachBottom">

					<view v-if="index == 0">
						<Notice :courseID="courseID"></Notice>
					</view>

					<view v-if="index == 1">
						<Courseware :courseID="courseID"></Courseware>
					</view>

					<view v-if="index == 2">
						<view v-if="reload">
							<Comment :courseID="courseID"></Comment>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import Notice from '@/pages/course/courseDetails/notice.vue';
	import Courseware from '@/pages/course/courseDetails/courseware.vue';
	import Comment from '@/pages/course/courseDetails/comment.vue';

	import {
		getCourseDetails
	} from '@/api/modules/course.js'
	import {
		getIsEvaluate
	} from '@/api/modules/joinCourse.js'

	export default {
		data() {
			return {
				reload: true,
				courseID: 1,
				height: 0,
				isLoad: false,
				url: this.GOBAL.baseURL,
				courseDetails: {
					courseImage: ''
				},
				isEvaluateForm: {
					userEmail: '',
					courseId: ''
				},

				windowHeight: 800,

				// u-tabs-swiper
				list: [{
					name: '公告'
				}, {
					name: '课件'
				}, {
					name: '讨论'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		components: {
			Notice,
			Courseware,
			Comment
		},
		// 用于找到组件上下部分剩余屏幕大小
		//参考博客链接：https://blog.csdn.net/weixin_39793790/article/details/105397875
		onReady: function(res) {

			var _this = this;
			uni.getSystemInfo({
				success: (resu) => {
					let query = uni.createSelectorQuery()
					query.select('#myTab').boundingClientRect()
					query.exec(function(res) {
						_this.height = resu.windowHeight - res[0].top;
						// console.log(resu.windowWidth)
						_this.height = _this.height * 750.0 / resu.windowWidth;
						// console.log('打印页面的剩余高度', _this.height+'rpx');
					})
				},
				fail: (res) => {
					console.log('错误了')
				}
			})
		},
		methods: {
			goEvaluate() {
				//courseID
				getIsEvaluate({
						...this.isEvaluateForm
					})
					.then(resp => {
						uni.navigateTo({
							url: './courseDetails/NewEvaluate?courseID=' + this.courseID,
							success() {
								uni.setStorageSync('courseId', this.courseID)
							}
						});
					})
					.catch(resp => {
						this.toast(resp.message, 3)
						console.log("失败了")
					})
			},
			// 以下是u-tabs-swiper
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}
		},
		onLoad(params) {
			let that = this;

			that.courseID = params.courseID
			that.isEvaluateForm.courseId = that.courseID
			that.isEvaluateForm.userEmail = uni.getStorageSync('userEmail')
			// console.log(params.courseID); //打印出上个页面传递的参数。

			let data = {
				id: params.courseID
			}

			getCourseDetails(data)
				.then(resp => {
					// console.log(resp)
					that.courseDetails = resp.data

					// console.log(that.courseDetails)

					that.isLoad = true
				})
				.catch(resp => {

				})
		},
		onShow() {
			// 计算屏幕剩余高度  填补剩余高度
			let that = this;
			
			that.reload = false;
			that.$nextTick(function(){
				that.reload = true;
			})
			
			uni.getSystemInfo({
				success(res) {
					// console.log(res.screenHeight)
					// console.log(res.screenWidth)
					// console.log(res.pixelRatio)
					// console.log(res.statusBarHeight) 
					// console.log(plus.navigator.getStatusbarHeight())
					that.windowHeight = (res.screenHeight * res.pixelRatio - 456.0 / 750 * res.screenWidth * res.pixelRatio - res.statusBarHeight *
						res.pixelRatio - 80 * 1080 / 750 - 49 * res.screenWidth * res.pixelRatio / 750) * (750.0 / (res.screenWidth *
						res.pixelRatio))
					// that.windowHeight = (res.screenHeight * res.pixelRatio - 456.0/750 * res.screenWidth * res.pixelRatio - plus.navigator.getStatusbarHeight() * res.pixelRatio - 180) * (750.0/(res.screenWidth * res.pixelRatio))
					// console.log(that.windowHeight)
				}
			});
			// console.log('w' + this.scrollviewHigh);


		},
	}
</script>

<style scoped>
	.swiper-item {
		height: 300rpx;
		/* background-color: #F7F7F7; */
	}
</style>
